<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <qjtitle :title="title"></qjtitle>
      <el-form ref="queryForm" :inline="true">
        <el-date-picker v-model="queryParams.sel_qsrq" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          placeholder="起始日期">
        </el-date-picker>
        <el-date-picker v-model="queryParams.sel_jzrq" type="date"  format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          placeholder="结束日期">
        </el-date-picker>
        <el-form-item label="部门">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_ssbm">
            <el-option v-for="({ sjxdm, sjxmc }) in ssxl2" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_xm">
            <el-option v-for="({ sjxdm, sjxmc }) in ssxl1" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData">查询</el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel">
      <el-row class="mbBottom">
        <el-col :span="16">
          <el-button type="primary" @click="doExportExcel"> 导出 </el-button>
        </el-col>
      </el-row>
      <el-table ref="table-main" :data="zbdata" height="calc(100% - 113px)" :loading="bgLoading" border >
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="数据名称" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="所属部门" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="操作用户" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="新增数据条数" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="修改数据条数" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="删除数据条数" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="文档上传数" align="center" prop="lb" show-overflow-tooltip width="180"  />
      </el-table>
      <qjfy :total='total' @fun="qjfyfun"></qjfy>
    </page-panel-new>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {
  getListData,
  getSelectorData,
  exportExcel
} from '@/api/syfxxtApi/zxrcsw/zlscqk/api.js'

import dayjs from 'dayjs'

export default Vue.extend({
  name: 'Zxrcsw-zlscqk',
  data() {
    return {
      keycz: 0, //附件上传key
      fileList: [],
      fileList_fj: [],
      title: '资料上传情况', //页面标题
      dialogTitle: '', // 弹框标题
      bgLoading: false, // 表格加载状态
      Open1: false, //弹框状态
      zbdata: [], //主表格数据
      ssxl2: [], //查询选择器 下拉数据
      ssxl1: [], //查询选择器 下拉数据
      selectorData_in_fbdw: [], //录入选择器 下拉数据
      optype: '', //操作类型
      
      formDisable: false, //表单禁用状态
      queryParams: {
        sel_qsrq: '',
        sel_jzrq: '',
        sel_ssbm: '',
        sel_xm: '',
        pageNum: 1,
        pageSize: 20,
      }, //查询参数
      total: 0,
    }
  },
  mounted() {
    this.getListData();
    this.getselectorData();
  },
  methods: {
    //获取 选择器数据
    getselectorData() {
      try {
        const param = {
          // 
        };
        getSelectorData("xm", param).then((res) => {
          if (res.success) {
            this.ssxl1 = res.rows;
          } else {
            this.ssxl1 = [];
          }
        })
        getSelectorData("ssbm", param).then((res) => {
          if (res.success) {
            this.ssxl2 = res.rows;
          } else {
            this.ssxl2 = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error);
      }
    },

    //获取主表格查询数据
    qjfyfun(e) {//分页
      this.queryParams.start = e.start;
      this.queryParams.limit = e.limit;
    },
    getListData() {
      try {
        this.bgLoading = true;
        getListData(this.queryParams).then((res) => {
          this.bgLoading = false;
          if (res.success) {
            this.zbdata = res.rows;
            this.total = res.total;
          } else {
            this.zbdata = [];
            this.$message.error({ content: '请重新搜索!', placement: 'center' });
          }
        }).catch((error) => {
          this.bgLoading = false;
          console.warn('接口提示', error);
        });
      } catch (error) {
        this.bgLoading = false;
        console.warn('接口提示', error);
      }
    },


    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams = {
        sel_qsrq: null,
        sel_jzrq: null,
        sel_ssbm: '',
        sel_xm: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.getListData();
    },



    //处理导出按钮事件
    doExportExcel() {
      var params = { ...this.queryParams };
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        exportExcel(this.download, params, filename);
      } catch (error) {
      }
    },
  },
})
</script>

<style lang="less" scoped>
.app-container {
  height: 100%;

  .el-table {
    overflow: scroll;
  }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

.delbutton {
  margin-right: 10px;
}

.mbBottom {
  margin-bottom: 10px;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 10px 0;
}
</style>
